<template>
    <div class="myecharts" ref="echartRef"></div>
</template>


<script>
    import * as echarts from 'echarts' //引入echarts
    export default {
        props: ['params'],
        name: '',

        data() {
            return {
                xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                yData1: [],
                yData2: [],
                yData3: [],
                yData4: []
            };
        },

        mounted() {
            this.getEchartData();
        },
        watch: {
            params: {
                handler(newValue, oldValue) {
                    let list = newValue.slice(0, 12);
                    this.yData1 = list.map(item => {
                        return item.ss;
                    });
                    this.yData2 = list.map(item => {
                        return item.dz;
                    });
                    this.yData3 = list.map(item => {
                        return item.ux;
                    });
                    this.yData4 = list.map(item => {
                        return item.dzlp;
                    });
                    this.getEchartData();

                },
                deep: true
            },
        },
        methods: {
            getEchartData() {
                let self = this;
                let echart = self.$echarts.init(self.$refs.echartRef);
                var option = {
                    backgroundColor: '#fff',
                    tooltip: { //提示框组件
                        trigger: 'axis',
                        // formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2} : {c2}<br />{a3}: {c3}',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 14,
                        },
                        formatter: function (params) {
                            // params 是一个包含当前数据信息的对象
                            var date = params[0] ? params[0].name : '';
                            var name1 = params[0] ? params[0].seriesName : '';
                            var name2 = params[1] ? params[1].seriesName : '';
                            var name3 = params[2] ? params[2].seriesName : '';
                            var name4 = params[3] ? params[3].seriesName : '';
                            var value1 = params[0] ? params[0].value + '（万支）' : '';
                            var value2 = params[1] ? params[1].value + '（万支）' : '';
                            var value3 = params[2] ? params[2].value + '（万支）' : '';
                            var value4 = params[3] ? params[3].value + '（万支）' : '';
                            var text1 = '';
                            var text2 = '';
                            var text3 = '';
                            var text4 = '';
                            if (name1) {
                                text1 = '<br/>' + name1 + ': ' + value1;
                            }
                            if (name2) {
                                text2 += '<br/>' + name2 + ': ' + value2;
                            }
                            if (name3) {
                                text3 += '<br/>' + name3 + ': ' + value3;
                            }
                            if (name4) {
                                text4 += '<br/>' + name4 + ': ' + value4;
                            }
                            return date + text1 + text2 + text3 + text4;
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '6%',
                        top: 30,
                        padding: '0 0 10 0',
                        containLabel: true,
                    },
                    legend: {//图例组件，颜色和名字
                        right: 10,
                        top: 0,
                        itemGap: 16,
                        itemWidth: 18,
                        itemHeight: 10,
                        data: [{
                            name: '伸缩',
                        }, {
                            name: '多支',
                        }, {
                            name: 'U型',
                        }, {
                            name: '单支',
                        }],
                        textStyle: {
                            color: '#a8aab0',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,//坐标轴两边留白
                            data: self.xData,
                            axisLabel: { //坐标轴刻度标签的相关设置。
                                interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                                margin: 15,
                                textStyle: {
                                    color: '#333',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisTick: {//坐标轴刻度相关设置。
                                show: false,
                            },
                            axisLine: {//坐标轴轴线相关设置
                                lineStyle: {
                                    color: '#333',
                                    opacity: 0.06
                                }
                            },
                            splitLine: { //坐标轴在 grid 区域中的分隔线。
                                show: false,
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: '(万支)',
                            nameLocation: 'end',
                            nameTextStyle: {
                                padding: [0, 0, 0, -50]
                            },
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#333',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#333'],
                                    opacity: 0.06
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            name: '伸缩',
                            type: 'bar',
                            data: self.yData1,
                            barWidth: 15,
                            barGap: 0,//柱间距离
                            label: {//图形上的文本标签
                                normal: {
                                    show: false,

                                },
                            },
                            itemStyle: {//图形样式
                                normal: {
                                    // barBorderRadius: [5, 5, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 1, color: 'rgba(72, 73, 181, 0.7)'
                                    }, {
                                        offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                                    }, {
                                        offset: 0.25, color: 'rgba(151,151,230, 0.7)'
                                    }, {
                                        offset: 0, color: 'rgba(151,151,230, 0.7)'
                                    }], false),
                                },
                            },
                        },
                        {
                            name: '多支',
                            type: 'bar',
                            data: self.yData2,
                            barWidth: 15,
                            barGap: 0.2,//柱间距离
                            label: {//图形上的文本标签
                                normal: {
                                    show: false,

                                },
                            },
                            itemStyle: {//图形样式
                                normal: {
                                    // barBorderRadius: [5, 5, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 1, color: 'rgba(29,177,26, 0.7)'
                                    }, {
                                        offset: 0.9, color: 'rgba(48,201,45, 0.7)'
                                    }, {
                                        offset: 0.25, color: 'rgba(112,239,110, 0.7)'
                                    }, {
                                        offset: 0, color: 'rgba(112,239,110, 0.7)'
                                    }], false),
                                },
                            },
                        },
                        {
                            name: 'U型',
                            type: 'bar',
                            data: self.yData3,
                            barWidth: 15,
                            barGap: 0.2,//柱间距离
                            label: {//图形上的文本标签
                                normal: {
                                    show: false,

                                },
                            },
                            itemStyle: {//图形样式
                                normal: {
                                    // barBorderRadius: [5, 5, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 1, color: 'rgba(230,64,74, 0.7)'
                                    }, {
                                        offset: 0.9, color: 'rgba(230,64,74, 0.7)'
                                    }, {
                                        offset: 0.25, color: 'rgba(229,140,145, 0.7)'
                                    }, {
                                        offset: 0, color: 'rgba(229,140,145, 0.7)'
                                    }], false),
                                },
                            },
                        },
                        {
                            name: '单支',
                            type: 'bar',
                            data: self.yData4,
                            barWidth: 15,
                            barGap: 0.2,//柱间距离
                            label: {//图形上的文本标签
                                normal: {
                                    show: false,

                                },
                            },
                            itemStyle: {//图形样式
                                normal: {
                                    // barBorderRadius: [5, 5, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 1, color: 'rgba(243,170,43, 0.7)'
                                    }, {
                                        offset: 0.9, color: 'rgba(243,170,43, 0.7)'
                                    }, {
                                        offset: 0.25, color: 'rgba(253, 200, 106, 0.7)'
                                    }, {
                                        offset: 0, color: 'rgba(253, 200, 106, 0.7)'
                                    }], false),
                                },
                            },
                        }
                    ]
                };

                echart.setOption(option);
             
                echart.on('legendselectchanged', function (params) {
                    const selectedCount = Object.values(params.selected).filter(Boolean).length;

                    if (selectedCount === 0 && !params.selected[params.name]) {
                        // 阻止取消最后一个图例
                        const currentOption = this.getOption();
                        currentOption.legend[0].selected[params.name] = true;
                        this.setOption(currentOption);
                    }
                });
            }
        },
    };
</script>

<style lang="scss" scoped>
    .myecharts {
        width: 100%;
        height: 300px;
    }
    .tip-box {
            position: absolute;
            background: #fef0f0;
            color: #f56c6c;
            padding: 8px 16px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            z-index: 2000;
            font-size: 14px;
        }
</style>